<template>

    <headerHome></headerHome>
    <div class="index-box">

        <section class="hot-container" id="are1" ref="are1">
            <div class="center_c hot-box" style="position: relative;">
                <div class="hot-nav">
                    <h2 class="nav-title">当季热门推荐</h2>
                    <div class="nav-tabs pointer-style-pointer">
                        <div @click="tabEnter(0)" :class="tabsIndex == 0 ? 'nav-tab-active' : ''">出境
                            <div v-show="tabsIndex == 0" class="triangle"></div>
                        </div>
                        <div @click="tabEnter(1)" :class="tabsIndex == 1 ? 'nav-tab-active' : ''">国内
                            <div v-show="tabsIndex == 1" class="triangle"></div>
                        </div>
                        <div @click="tabEnter(2)" :class="tabsIndex == 2 ? 'nav-tab-active' : ''">周边
                            <div v-show="tabsIndex == 2" class="triangle"></div>
                        </div>
                        <div @click="tabEnter(3)" :class="tabsIndex == 3 ? 'nav-tab-active' : ''">海岛
                            <div v-show="tabsIndex == 3" class="triangle"></div>
                        </div>
                    </div>
                </div>
                <div class="hot-list" style="height:284px">
                    <CustomCard v-for="rs in hotItem" :key="rs.id" width="264" height="284" imgHeight="192"
                        :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                </div>

                <div class="affix">
                    <el-affix target=".index-box" :offset="0">
                        <div class="side-nav">
                            <div @click="clickNav(1)"
                                :class="scrollNavId == 1 ? 'side-title side-title-show' : 'side-title'">
                                当季热门 <div v-show="scrollNavId == 1" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(2)"
                                :class="scrollNavId == 2 ? 'side-title side-title-show' : 'side-title'">
                                畅游国内 <div v-show="scrollNavId == 2" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(3)"
                                :class="scrollNavId == 3 ? 'side-title side-title-show' : 'side-title'">
                                尊享欧洲 <div v-show="scrollNavId == 3" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(4)"
                                :class="scrollNavId == 4 ? 'side-title side-title-show' : 'side-title'">
                                玩转亚洲 <div v-show="scrollNavId == 4" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(5)"
                                :class="scrollNavId == 5 ? 'side-title side-title-show' : 'side-title'">
                                畅玩非洲 <div v-show="scrollNavId == 5" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(6)"
                                :class="scrollNavId == 6 ? 'side-title side-title-show' : 'side-title'">
                                尊享美洲 <div v-show="scrollNavId == 6" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(7)"
                                :class="scrollNavId == 7 ? 'side-title side-title-show' : 'side-title'">
                                大洋洲 <div v-show="scrollNavId == 7" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(8)"
                                :class="scrollNavId == 8 ? 'side-title side-title-show' : 'side-title'">
                                缤纷海岛 <div v-show="scrollNavId == 8" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(9)"
                                :class="scrollNavId == 9 ? 'side-title side-title-show' : 'side-title'">
                                主题游 <div v-show="scrollNavId == 9" class="side-title-tip"></div>
                            </div>
                            <div @click="clickNav(10)"
                                :class="scrollNavId == 10 ? 'side-title side-title-show' : 'side-title'">
                                热门签证 <div v-show="scrollNavId == 10" class="side-title-tip"></div>
                            </div>
                        </div>
                    </el-affix>
                </div>
            </div>


        </section>

        <section class="domestic box" id="are2" ref="are2">
            <div class="domestic-title">
                <h2 class="h2">畅游国内</h2>
                <router-link target="_blank" to="/domestic">更多国内线路>></router-link>
            </div>
            <div class="domestic-tabs">
                <router-link target="_blank" :to="`/line/145`" class="domestic-tabs-item">广东</router-link>
                <router-link target="_blank" :to="`/line/228`" class="domestic-tabs-item">广西</router-link>
                <router-link target="_blank" :to="`/line/79`" class="domestic-tabs-item">云南</router-link>
                <router-link target="_blank" :to="`/line/214`" class="domestic-tabs-item">贵州</router-link>
                <router-link target="_blank" :to="`/line/164`" class="domestic-tabs-item">四川</router-link>
                <router-link target="_blank" :to="`/line/76`" class="domestic-tabs-item">海南</router-link>
                <router-link target="_blank" :to="`/line/114`" class="domestic-tabs-item">上海</router-link>
                <router-link target="_blank" :to="`/line/81`" class="domestic-tabs-item">东北</router-link>
                <router-link target="_blank" :to="`/line/78`" class="domestic-tabs-item">湖南</router-link>
                <router-link target="_blank" :to="`/line/356`" class="domestic-tabs-item">湖北</router-link>
                <router-link target="_blank" :to="`/line/172`" class="domestic-tabs-item">新疆</router-link>
                <router-link target="_blank" :to="`/line/245`" class="domestic-tabs-item">内蒙</router-link>
                <router-link target="_blank" :to="`/line/302`" class="domestic-tabs-item">陕西</router-link>
                <router-link target="_blank" :to="`/line/371`" class="domestic-tabs-item">河南</router-link>
                <router-link target="_blank" :to="`/line/122`" class="domestic-tabs-item">福建</router-link>
                <router-link target="_blank" :to="`/line/113`" class="domestic-tabs-item">安徽</router-link>
                <router-link target="_blank" :to="`/line/174`" class="domestic-tabs-item">山东</router-link>
                <router-link target="_blank" :to="`/line/204`" class="domestic-tabs-item">江西</router-link>
                <router-link target="_blank" :to="`/line/343`" class="domestic-tabs-item">山西</router-link>
                <router-link target="_blank" :to="`/line/339`" class="domestic-tabs-item">浙江</router-link>
                <router-link target="_blank" :to="`/line/321`" class="domestic-tabs-item">江苏</router-link>

            </div>
            <div class="domestic-list">
                <CustomCard width="264" height="405" imgHeight="300" v-for="rs in domesticList" :key="rs.id"
                    :pic="rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
            </div>

        </section>

        <section class="foreign" id="are3" ref="are3">
            <div class="box">
                <div class="df">
                    <h2 class="h2">尊享欧洲</h2>
                    <div class="df">
                        <div @click="europeTabsChange('西欧')"
                            :class="europeTabName == '西欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            西欧</div>
                        <div @click="europeTabsChange('南欧')"
                            :class="europeTabName == '南欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            南欧</div>
                        <div @click="europeTabsChange('北欧')"
                            :class="europeTabName == '北欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            北欧</div>
                        <div @click="europeTabsChange('东欧')"
                            :class="europeTabName == '东欧' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            东欧</div>
                    </div>
                    <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
                </div>
                <div class="foreign-citys">
                    <router-link v-for="rs in europeTabsShow" :key="rs.id" :to="`/line/${rs.id}`">
                        <div class="foreign-city-item">
                            <div class="foreign-city-item-title">{{ rs.title }}</div>
                            <div class="English-name">{{ rs.title_en }}</div>
                        </div>
                    </router-link>
                </div>

                <div class="foreign-list">
                    <CustomCard width="276" height="284" imgHeight="192" v-for="rs in foreignList" :key="rs.id"
                        :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                </div>
            </div>
        </section>

        <section class="asia box" id="are4" ref="are4">
            <div class="df">
                <h2 class="h2">玩转亚洲</h2>
                <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
            </div>
            <div class="df asia-box">
                <div class="sidebar">
                    <div class="sidebar-area">
                        <div class="sidebar-title">东亚</div>
                        <div class="sidebar-navs">
                            <router-link target="_blank" to="/line/102" class="sidebar-nav-item clamp-line-1"
                                title="日本">日本</router-link>
                            <router-link target="_blank" to="/line/103" class="sidebar-nav-item clamp-line-1"
                                title="韩国">韩国</router-link>
                            <router-link target="_blank" to="/line/86" class="sidebar-nav-item clamp-line-1"
                                title="泰国">泰国</router-link>
                            <router-link target="_blank" to="/line/84" class="sidebar-nav-item clamp-line-1"
                                title="新加坡">新加坡</router-link>
                            <router-link target="_blank" to="/line/85" class="sidebar-nav-item clamp-line-1"
                                title="马来西亚">马来西亚</router-link>
                            <router-link target="_blank" to="/line/55" class="sidebar-nav-item clamp-line-1"
                                title="马来西亚">泰新马</router-link>
                            <router-link target="_blank" to="/line/89" class="sidebar-nav-item clamp-line-1"
                                title="越南">越南</router-link>
                            <router-link target="_blank" to="/line/90" class="sidebar-nav-item clamp-line-1"
                                title="柬埔寨">柬埔寨</router-link>
                            <router-link target="_blank" to="/line/328" class="sidebar-nav-item clamp-line-1"
                                title="菲律宾">菲律宾</router-link>
                            <router-link target="_blank" to="/line/329" class="sidebar-nav-item clamp-line-1"
                                title="文莱">文莱</router-link>
                        </div>
                    </div>
                    <div class="sidebar-area">
                        <div class="sidebar-title">南亚</div>
                        <div class="sidebar-navs">
                            <router-link target="_blank" to="/line/97" class="sidebar-nav-item clamp-line-1"
                                title="尼泊尔">尼泊尔</router-link>
                            <router-link target="_blank" to="/line/98" class="sidebar-nav-item clamp-line-1"
                                title="印度">印度</router-link>
                            <router-link target="_blank" to="/line/454" class="sidebar-nav-item clamp-line-1"
                                title="巴基斯坦">巴基斯坦</router-link>
                        </div>
                    </div>
                    <div class="sidebar-area">
                        <div class="sidebar-title">中亚</div>
                        <div class="sidebar-navs">
                            <router-link target="_blank" to="/line/455" class="sidebar-nav-item clamp-line-1"
                                title="哈萨克斯坦">哈萨克斯坦</router-link>
                            <router-link target="_blank" to="/line/456" class="sidebar-nav-item clamp-line-1"
                                title="吉尔吉斯斯坦">吉尔吉斯斯坦</router-link>
                            <router-link target="_blank" to="/line/460" class="sidebar-nav-item clamp-line-1"
                                title="乌兹别克斯坦">乌兹别克斯坦</router-link>
                            <router-link target="_blank" to="/line/524" class="sidebar-nav-item clamp-line-1"
                                title="土库曼斯坦">土库曼斯坦</router-link>
                        </div>
                    </div>
                    <div class="sidebar-area">
                        <div class="sidebar-title">西亚</div>
                        <div class="sidebar-navs">
                            <router-link target="_blank" to="/line/520" class="sidebar-nav-item clamp-line-1"
                                title="阿塞拜疆">阿塞拜疆</router-link>
                            <router-link target="_blank" to="/line/521" class="sidebar-nav-item clamp-line-1"
                                title="格鲁吉亚">格鲁吉亚</router-link>
                        </div>
                    </div>
                </div>
                <div class="asia-right">
                    <CustomCard width="264" height="270" imgHeight="180" direction="left" v-for="rs in asiaList"
                        :key="rs.id" :pic="rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                </div>
            </div>
        </section>

        <section class="foreign" id="are5" ref="are5">
            <div class="box">
                <div class="df">
                    <h2 class="h2">畅玩非洲</h2>
                    <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
                </div>
                <div class="foreign-tabs">
                    <!-- foreign-tabs-item-show -->
                    <div><router-link to="/line/111" target="_blank" class="foreign-tabs-item">埃及</router-link></div>
                    <div><router-link to="/line/110" target="_blank" class="foreign-tabs-item">南非</router-link></div>
                    <div><router-link to="/line/108" target="_blank" class="foreign-tabs-item">迪拜</router-link></div>
                    <div><router-link to="/line/107" target="_blank" class="foreign-tabs-item">土耳其</router-link></div>
                    <div><router-link to="/line/109" target="_blank" class="foreign-tabs-item">毛里求斯</router-link></div>
                    <div><router-link to="/line/197" target="_blank" class="foreign-tabs-item">马达加斯加</router-link></div>
                    <div><router-link to="/line/198" target="_blank" class="foreign-tabs-item">塞舌尔</router-link></div>
                    <div><router-link to="/line/295" target="_blank" class="foreign-tabs-item">摩洛哥</router-link></div>
                    <div><router-link to="/line/296" target="_blank" class="foreign-tabs-item">阿布扎比</router-link></div>
                    <div><router-link to="/line/346" target="_blank" class="foreign-tabs-item">留尼汪岛</router-link></div>
                </div>

                <div class="foreign-list">
                    <CustomCard width="276" height="284" imgHeight="192" v-for="rs in africaList" :key="rs.id"
                        :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                    <!-- <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
              <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
              <CustomCard width="276" height="284" imgHeight="192"></CustomCard> -->
                </div>
            </div>
        </section>

        <section class="foreign" id="are6" ref="are6">
            <div class="box">
                <div class="df">
                    <h2 class="h2">尊享美洲</h2>
                    <div class="df">
                        <div @click="americaTabsChange('北美')"
                            :class="americaTabName == '北美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            北美</div>
                        <div @click="americaTabsChange('中美')"
                            :class="americaTabName == '中美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            中美</div>
                        <div @click="americaTabsChange('南美')"
                            :class="americaTabName == '南美' ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            南美</div>
                    </div>
                    <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
                </div>
                <div class="foreign-citys">
                    <router-link v-for="rs in americaTabsShow" :key="rs.id" :to="`/line/${rs.id}`">
                        <div class="foreign-city-item">
                            <div class="foreign-city-item-title">{{ rs.title }}</div>
                            <div class="English-name">{{ rs.title_en }}</div>
                        </div>
                    </router-link>
                </div>

                <div class="foreign-list">
                    <CustomCard width="276" height="284" imgHeight="192" v-for="rs in americaList" :key="rs.id"
                        :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id"></CustomCard>
                    <!-- <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
              <CustomCard width="276" height="284" imgHeight="192"></CustomCard>
              <CustomCard width="276" height="284" imgHeight="192"></CustomCard> -->
                </div>
            </div>
        </section>

        <section class="oceania box" id="are7" ref="are7">
            <div class="df">
                <h2 class="h2">大洋洲</h2>
                <router-link target="_blank" to="/outbound" class="more">查看更多</router-link>
            </div>
            <div class="df oceania-box">
                <div class="sidebar" style="width:270px;">
                    <div class="sidebar-area">
                        <div class="sidebar-title">目的地</div>
                        <div class="sidebar-navs">
                            <router-link target="_blank" to="/line/61"
                                class="sidebar-nav-item clamp-line-1">澳大利亚</router-link>
                            <router-link target="_blank" to="/line/62"
                                class="sidebar-nav-item clamp-line-1">新西兰</router-link>
                            <router-link target="_blank" to="/line/63"
                                class="sidebar-nav-item clamp-line-1">澳洲海岛</router-link>
                            <router-link target="_blank" to="/line/104"
                                class="sidebar-nav-item clamp-line-1">斐济</router-link>
                            <router-link target="_blank" to="/line/105"
                                class="sidebar-nav-item clamp-line-1">大溪地</router-link>
                            <router-link target="_blank" to="/line/324"
                                class="sidebar-nav-item clamp-line-1">布里斯班</router-link>
                            <router-link target="_blank" to="/line/277"
                                class="sidebar-nav-item clamp-line-1">黄金海岸</router-link>
                            <router-link target="_blank" to="/line/278"
                                class="sidebar-nav-item clamp-line-1">大堡礁</router-link>
                            <router-link target="_blank" to="/line/279"
                                class="sidebar-nav-item clamp-line-1">悉尼</router-link>
                            <router-link target="_blank" to="/line/280"
                                class="sidebar-nav-item clamp-line-1">墨尔本</router-link>
                            <router-link target="_blank" to="/line/282"
                                class="sidebar-nav-item clamp-line-1">奥克兰</router-link>
                            <router-link target="_blank" to="/line/292"
                                class="sidebar-nav-item clamp-line-1">凯恩斯</router-link>
                            <router-link target="_blank" to="/line/318"
                                class="sidebar-nav-item clamp-line-1">皇后镇</router-link>

                        </div>
                    </div>
                </div>
                <div class="oceania-right">
                    <CustomCard width="264" height="270" imgHeight="180" direction="left" v-for="rs in oceaniaList"
                        :key="rs.id" :pic="rs.picture || rs.pic" :title="rs.title" :price="rs.price" :to="rs.id">
                    </CustomCard>
                </div>
            </div>
        </section>

        <section class="foreign" id="are8" ref="are8">
            <div class="box">
                <div class="df">
                    <h2 class="h2">缤纷海岛</h2>
                    <router-link target="_blank" to="/islands" class="more">查看更多</router-link>
                </div>

                <div class="foreign-list" style="height: 170px;">
                    <!-- <router-link target="_blank" v-for="rs in islandList" :key="rs.id" :pic="rs.pic"  :to="rs.id"  style="padding-top: 16px;">
                  <div class="foreign-island">
                      <img :src="rs.pic"
                          alt="" class="foreign-island-img">
                      <div class="foreign-island-title">{{ rs.title }}</div>
                  </div>
              </router-link> -->

                    <router-link target="_blank" to="/line/91" style="padding-top: 16px;">
                        <div class="foreign-island">
                            <img src="https://admin.hqx.com.cn/Public/App/image/island-1.jpg" alt=""
                                class="foreign-island-img">
                            <div class="foreign-island-title">巴厘岛</div>
                        </div>
                    </router-link>
                    <router-link target="_blank" to="/line/93" style="padding-top: 16px;">
                        <div class="foreign-island">
                            <img src="https://admin.hqx.com.cn/Public/App/image/island-2.jpg" alt=""
                                class="foreign-island-img">
                            <div class="foreign-island-title">普吉岛</div>
                        </div>
                    </router-link>
                    <router-link target="_blank" to="/line/92" style="padding-top: 16px;">
                        <div class="foreign-island">
                            <img src="https://admin.hqx.com.cn/Public/App/image/island-3.jpg" alt=""
                                class="foreign-island-img">
                            <div class="foreign-island-title">沙巴岛</div>
                        </div>
                    </router-link>
                    <router-link target="_blank" to="/line/104" style="padding-top: 16px;">
                        <div class="foreign-island">
                            <img src="https://admin.hqx.com.cn/Public/App/image/island-4.jpg" alt=""
                                class="foreign-island-img">
                            <div class="foreign-island-title">斐济</div>
                        </div>
                    </router-link>
                    <router-link target="_blank" to="/line/176" style="padding-top: 16px;">
                        <div class="foreign-island">
                            <img src="https://admin.hqx.com.cn/Public/App/image/island-5.jpg" alt=""
                                class="foreign-island-img">
                            <div class="foreign-island-title">塞班岛</div>
                        </div>
                    </router-link>
                </div>
            </div>
        </section>

        <section class="theme-tour box" id="are9" ref="are9">
            <div class="df" style="margin-bottom: 10px;">
                <h2 class="h2">主题游</h2>
                <router-link target="_blank" to="/theme" class="more">查看更多</router-link>
            </div>
            <div class="theme-tour-category">
                <router-link target="_blank" to="/theme/list/7">
                    <div class="category-item category-item-bg1">
                        <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (1).png" alt="">
                        <div class="category-item-title">研学</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/theme/list/6">
                    <div class="category-item category-item-bg2">
                        <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (2).png" alt="">
                        <div class="category-item-title">邮轮</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/theme/list/11">
                    <div class="category-item category-item-bg3">
                        <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (3).png" alt="">
                        <div class="category-item-title">爸妈游</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/theme/list/10">
                    <div class="category-item category-item-bg4">
                        <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (4).png" alt="">
                        <div class="category-item-title">海岛</div>
                    </div>
                </router-link>
                <router-link target="_blank" to="/theme/list/5">
                    <div class="category-item category-item-bg5">
                        <img src="https://admin.hqx.com.cn/Public/App/image/theme-tour-category-img (5).png" alt="">
                        <div class="category-item-title">团建</div>
                    </div>
                </router-link>

            </div>
            <!-- <div class="df">
          <div class="theme-tour-banner-hot">
              <div class="banner-hot-item">
                  <router-link target="_blank" to="/"></router-link>
              </div>
              <div class="banner-hot-item">
                  <router-link target="_blank" to="/"></router-link>
              </div>
          </div>
          <div class="theme-tour-banner">
              <router-link target="_blank" to="/"></router-link>
          </div>
      </div> -->
        </section>

        <section class="foreign" id="are10" ref="are10">
            <div class="box visa">
                <div class="df">
                    <h2 class="h2">热门签证</h2>
                    <div class="df">
                        <div @click="getVisa(49)"
                            :class="visaTabId == 49 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            亚洲
                        </div>
                        <div @click="getVisa(2)"
                            :class="visaTabId == 2 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            欧洲
                        </div>
                        <div @click="getVisa(7)"
                            :class="visaTabId == 7 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            美洲
                        </div>
                        <div @click="getVisa(50)"
                            :class="visaTabId == 50 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            大洋洲
                        </div>
                        <div @click="getVisa(51)"
                            :class="visaTabId == 51 ? 'foreign-area-title foreign-area-title-show' : 'foreign-area-title'">
                            非洲
                        </div>

                    </div>
                    <router-link target="_blank" to="/visa" class="more">查看更多</router-link>
                </div>
                <ul class="visa-con">

                    <li v-for="rs in visaShow" :key="rs.id">
                        <router-link target="_blank" :to="`/visa/list/${rs.id}`">
                            <div class="flag">
                                <img :src="'https://admin.hqx.com.cn/Public/Uploads/' + rs.pic" />
                            </div>
                            <h4 class="clamp-line-1" style="width: 170px;">{{ rs.title }}</h4>
                            <p>￥{{ rs.price }}元/人</p>
                        </router-link>
                    </li>

                  
                </ul>
            </div>
        </section>

        <section class="foreign">
            <div class="box" style="padding: 25px 30px 10px;">
                <div class="df">
                    <h2 class="h2">服务案例</h2>
                    <router-link target="_blank" to="/about" class="more">查看更多</router-link>
                </div>
                <n-carousel :slides-per-view="3" :space-between="20" :loop="true" :show-arrow="false" dot-type="line"
                    draggable class="carousel" :autoplay="true" interval="1500" style="padding-bottom:30px">
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel2.jpg">
                        <div class="carousel-title">凝心聚力 携手前行！五一清远非洲鼓团建亲子游</div>
                    </n-carousel-item>
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel1.jpg">
                        <div class="carousel-title">2024深圳市宝安区福永人民医院工会春游活动</div>
                    </n-carousel-item>
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel3.png">
                        <div class="carousel-title">南山中加学校井冈山500人研学之旅</div>
                    </n-carousel-item>
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel4.png">
                        <div class="carousel-title">日立电梯深圳公司湖南长沙衡山团建之旅</div>
                    </n-carousel-item>
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel5.png">
                        <div class="carousel-title">闪魔科技有限公司600人温泉团建</div>
                    </n-carousel-item>
                    <n-carousel-item>
                        <img class="carousel-img" src="https://admin.hqx.com.cn/Public/App/image/carousel6.png">
                        <div class="carousel-title">松下电子3000人团建活动</div>
                    </n-carousel-item>
                </n-carousel>

            </div>
        </section>
    </div>

    <web-footer />
    <back-top />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import CustomCard from "@/components/card/CustomCard.vue";
import headerHome from "@/components/general/HeaderHome.vue";

import { index_banner, line_items, theme_items, visa_country } from "@/api/travel";
import nationEurope from '@/assets/dictionaries/nationEurope.js';
import nationAmerica from '@/assets/dictionaries/nationAmerica.js';


// line_items 简化
let getItem = async (ids, limit = 4) => {
    let res = await line_items({
        ids, // 商品id
        limit
    });
    return res.data;
};

let getItemArea = async (area, limit = 4) => {
    let res = await line_items({
        area, // 目的地
        limit
    });

    return res.data;
};
let getItemDes = async (des, limit = 4) => {
    let res = await line_items({
        des, // 地区
        limit
    });
    return res.data;
};
let getItemTheme = async (theme, limit = 4) => {
    let res = await line_items({
        theme, // 地区
        limit
    });
    return res.data;
};



// 当季热门推荐
let tabsIndex = ref(0);

// 选项卡滑入事件
let tabEnter = (des) => {
    tabsIndex.value = des;
};

let hotList = ref([]);

const getHotList = async () => {
    let res1 = await getItemDes(1);
    let res2 = await getItem('6617,7740,7582,7743');
    let res3 = await getItemDes(2);
    let res4 = await getItemTheme(10);
    hotList.value = [res1, res2, res3, res4];
}
let hotItem = computed(() => {
    if (!hotList.value[tabsIndex.value]) return [];
    return hotList.value[tabsIndex.value].slice(0, 4);
})

// 畅游国内
let domesticList = ref([]);
// 欧洲
let foreignList = ref([]);
let foreignData = ref({ '西欧': [], '南欧': [], '北欧': [], '东欧': [] });
// 亚洲
let asiaList = ref([]);
// 非洲
let africaList = ref([]);
// 美洲
let americaList = ref([]);
let americaData = ref({ '北美': [], '中美': [], '南美': [] });
// 大洋洲
let oceaniaList = ref([]);
// 海岛
let islandList = ref([]);


let getCountryLists = async () => {
    // 国内
    domesticList.value = await getItem('6617,7740,7582,7743');
    // 欧洲
    foreignList.value = await getItem('7897,7857,7850,7845');
    // 亚洲
    asiaList.value = await getItem('7737,7424,7419,7618,7736,7906', 6);
    // 非洲
    africaList.value = await getItem('7827,7826,7825,7810');
    // 美洲
    americaList.value = await getItem('7298,7260,7230,7229');
    // 大洋洲
    oceaniaList.value = await getItem('7941,7936,7820');
    // 海岛
    islandList.value = await getItem('7951,7950,7949,7930,7926', 5);

    //  欧洲其他地区
    foreignData.value['西欧'] = foreignList.value;
    foreignData.value['南欧'] = await getItem('5598,4940,7255,6608');
    foreignData.value['北欧'] = await getItem('7707,7310,7283,6146,');
    foreignData.value['东欧'] = await getItem('7640,7639,7624,7562');
    //  美洲其他地区
    americaData.value['北美'] = americaList.value;
    americaData.value['中美'] = await getItem('7870,7859,7477,3037');
    americaData.value['南美'] = await getItem('7863,7855,7716,7646');
};



// let visaTab = ref({});
let visaTabId = ref(49);
let visaShow = ref([]);

let getVisa = async (id) => {
    visaTabId.value = id;
    visaShow.value = (await visa_country(id)).data;
};

let europeTabName = ref('西欧');
const europeTabsChange = (title) => {
    europeTabName.value = title;
    foreignList.value = foreignData.value[title];
};
const europeTabsShow = computed(() => {
    return nationEurope[europeTabName.value]
});
let americaTabName = ref('北美');
const americaTabsChange = (title) => {
    americaTabName.value = title;
    americaList.value = americaData.value[title];
};
const americaTabsShow = computed(() => {
    return nationAmerica[americaTabName.value]
});

// 定位锚点
let are1 = ref(null);
let are2 = ref(null);
let are3 = ref(null);
let are4 = ref(null);
let are5 = ref(null);
let are6 = ref(null);
let are7 = ref(null);
let are8 = ref(null);
let are9 = ref(null);
let are10 = ref(null);

// 滚动条位置
let scrollPosition = ref('');
let scrollNavId = ref(1);
// 盒子距离 
let boxDistance = ref({});

// 点击导航栏
let clickNav = (id) => {
    window.scrollTo({
        top: boxDistance.value[id]
    })
};

// 滚动事件处理函数
const handleScroll = (e) => {
    // 获取滚动条位置
    scrollPosition.value = window.scrollY || document.documentElement.scrollTop;
    if (scrollPosition.value <= boxDistance.value[1]) {
        scrollNavId.value = 1;
    } else if (scrollPosition.value <= boxDistance.value[2]) {
        scrollNavId.value = 2;
    } else if (scrollPosition.value <= boxDistance.value[3]) {
        scrollNavId.value = 3;
    } else if (scrollPosition.value <= boxDistance.value[4]) {
        scrollNavId.value = 4;
    } else if (scrollPosition.value <= boxDistance.value[5]) {
        scrollNavId.value = 5;
    } else if (scrollPosition.value <= boxDistance.value[6]) {
        scrollNavId.value = 6;
    } else if (scrollPosition.value <= boxDistance.value[7]) {
        scrollNavId.value = 7;
    } else if (scrollPosition.value <= boxDistance.value[8]) {
        scrollNavId.value = 8;
    } else if (scrollPosition.value <= boxDistance.value[9]) {
        scrollNavId.value = 9;
    } else {
        scrollNavId.value = 10;
    }
};



onMounted(() => {

    window.addEventListener('scroll', handleScroll);

    getHotList();
    getCountryLists();
    getVisa(visaTabId.value);
    setTimeout(() => {
        boxDistance.value = {
            1: are1.value.getBoundingClientRect().top,
            2: are2.value.getBoundingClientRect().top,
            3: are3.value.getBoundingClientRect().top,
            4: are4.value.getBoundingClientRect().top,
            5: are5.value.getBoundingClientRect().top,
            6: are6.value.getBoundingClientRect().top,
            7: are7.value.getBoundingClientRect().top,
            8: are8.value.getBoundingClientRect().top,
            9: are9.value.getBoundingClientRect().top,
            10: are10.value.getBoundingClientRect().top
        }
    }, 0)
});

// 移除滚动监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped lang="scss">
@import url('../../css/home/home.scss');
</style>